<template>
    <div class="home-recommend">
        <div>
            <recommend-list :feedList="feedList"></recommend-list>
        </div>
        <div class="loading" v-if="loading">
            <van-loading size="24px" vertical text-color="#0094ff" color="#0094ff"
                >加载中...</van-loading
            >
        </div>
    </div>
</template>

<script>
import _ from "lodash";
import RecommendList from "./RecommendList.vue";
export default {
    components: { RecommendList },
    data() {
        return {
            page: 1,
            feedList: [],
            loading: true,
        };
    },
    created() {
        this.getFeedList();
    },
    mounted() {
        window.addEventListener("scroll", this.windowScroll);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.windowScroll);
    },
    methods: {
        async getFeedList(pageSize = 20) {
            await this.axios.get(`HomeFeed?pageNum=1&pageSize=${pageSize}`).then((res) => {
                this.feedList = res.feeds;
                this.loading = false;
            });
        },
        more() {
            this.page++;
            let pageSize = this.page * 20;
            this.loading = true;
            this.getFeedList(pageSize);
        },
        windowScroll: _.throttle(function () {
            //卷去的距离
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            scrollTop = Math.ceil(scrollTop);
            //页面的高度
            let contentHight = document.body.scrollHeight;
            //窗口内容的高度
            let clientHeight = window.innerHeight;
            if (scrollTop + clientHeight >= contentHight - 1) {
                this.more();
            }
        }, 500),
    },
};
</script>

<style lang="scss" scoped>
.home-recommend {
    position: relative;

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 16px;
        li {
            padding: 10px 0;
            width: 165px;
            img {
                width: 165px;
                height: 220px;
            }
            h3 {
                width: 100%;
                font-size: 16px;
                font-weight: bold;
                color: #212121;
                opacity: 0.8;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                padding-top: 5px;
            }
            .right {
                font-size: 12px;
                color: rgb(144, 149, 155);
                background: rgba(192, 192, 192, 0.16);
                padding: 2px 4px;
            }
            .bottom {
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                color: #999;
            }
        }
    }
    .feeds {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 16px;
        li {
            padding: 10px 0;
            width: 165px;
            img {
                width: 165px;
                height: 220px;
            }
            .title {
                width: 90%;
                font-size: 16px;
                font-weight: bold;
                color: #212121;
                opacity: 0.8;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                padding-top: 5px;
                padding-left: 10px;
            }
            .left {
                margin-top: 3px;
                font-size: 12px;
                color: #fdc56f;
                padding: 5px 10px;
                display: inline-block;
                background: #fffbf2;
                padding-left: 10px;
            }
            .right {
                margin-top: 3px;
                font-size: 12px;
                color: #b8bbbf;
                padding-left: 10px;
                display: inline-block;
            }
        }
    }
    .loading {
        margin-bottom: 50px;
    }
}
</style>
